<template>
	<view class="login-container">
		<!-- 提示登录的图标 -->
		<uni-icons type="contact-filled" size="100" color="#AFAFAF"></uni-icons>
		<!-- 登录按钮 -->
		<button type="primary" class="btn-login" @click="getUserProfile">一键登录</button>
		<!-- 登录提示 -->
		<view class="tips-text">登录后尽享更多权益</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		watch,
		computed
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import {
		useuserInfoStore,
		useaddressStore,
		useupdatetokenStore,
		usegobackpageStore
	} from '@/store/store.js';
	const userInfoStore = useuserInfoStore()
	const addressStore = useaddressStore()
	const updatetokenStore = useupdatetokenStore()
	const gobackpageStore = usegobackpageStore()
	//判断是否获取用户信息成功
	const getUserProfile = () => {
		uni.getUserProfile({
			desc: '请求授权', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
			success: (res) => {
				// console.log('用户信息:', res);
				userInfoStore.getuserInfo(res.userInfo)
				getcode(res)
			},
			fail: (err) => {
				return uni.$showMsg('您取消了登录授权！')
			}
		});
	}
	//获取code
	const getcode = (info) => {
		uni.login({
			provider: 'weixin', // 指定登录的平台，这里以微信为例
			success: function(res) {
				if (res.code) {
					// console.log('获取到的临时凭证 code:', res.code);
					// 可以将 code 发送到自己的服务器进行后续处理
					// 准备参数对象,发送请求到服务器
					gettoken(info, res.code)
				} else {
					console.log('登录失败！' + res.errMsg);
				}
			},
			fail: function(err) {
				return uni.$showError('登录失败！')
			}
		});
	}
	//获取token
	const gettoken = async (info, code) => {
		const query = {
			code: code,
			encryptedData: info.encryptedData,
			iv: info.iv,
			rawData: info.rawData,
			signature: info.signature
		}
		// 换取 token
		const {
			data: loginResult
		} = await uni.$http.post('/api/public/v1/users/wxlogin', query)
		//测试代码
		updatetokenStore.updatetoken(
			"Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1aWQiOjIzLCJpYXQiOjE1NjQ3MzAwNzksImV4cCI6MTAwMTU2NDczMDA3OH0.YPt-XeLnjV-_1ITaXGY2FhxmCe4NvXuRnRB8OMCfnPo"
			)
		navigateBack()


		//这里的是真的，但是接口出问题了
		// if (loginResult.meta.status !== 200) return uni.$showMsg('登录失败！')
		// uni.$showMsg('登录成功')
		// updatetokenStore.updatetoken(loginResult.message.token)
		// navigateBack()
	}
	//跳转页面
	const navigateBack = () => {
		if (gobackpageStore.backpage && gobackpageStore.backpage.openType === 'switchTab') {
			// 调用小程序提供的 uni.switchTab() API 进行页面的导航
			uni.switchTab({
				// 要导航到的页面地址
				url: gobackpageStore.backpage.from,
				complete: () => {
					gobackpageStore.gobackpage({})
				}
			})
		}
	}
</script>

<style lang="scss">
	.login-container {
		// 登录盒子的样式
		height: 750rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background-color: white;
		position: relative;
		overflow: hidden;

		// 绘制登录盒子底部的半椭圆造型
		&::after {
			content: ' ';
			display: block;
			position: absolute;
			width: 100%;
			height: 40px;
			left: 0;
			bottom: 0;
			background-color: #f5f5f5;
			border-radius: 100%;
			transform: translateY(50%);
		}

		// 登录按钮的样式
		.btn-login {
			width: 90%;
			border-radius: 100px;
			margin: 15px 0;
			background-color: #c00000;
		}

		// 按钮下方提示消息的样式
		.tips-text {
			font-size: 12px;
			color: gray;
		}
	}
</style>